<template>
  <div>
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>费用统计
        <i class="el-icon-arrow-right"></i> 客户消费统计
      </el-breadcrumb-item>
    </el-breadcrumb> -->
    <div class="title">
      <span>全部账号</span>
      <div>
        <!-- <el-button type="primary" @click="reset">重置密码</el-button> -->
        <el-button type="primary" v-if="rolesId == 1 || rolesId ==5 || rolesId ==6 || rolesId ==8" @click="addAccount">新增账号</el-button>
        <el-button type="primary" v-if="oemFlag == 1" @click="addAccount">新增账号</el-button>
        <!-- <el-button icon="el-icon-refresh" @click="refresh"></el-button> -->
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <div class="leftitem">
            <!-- <div class="block">
              <el-date-picker v-model="serviceinfo.stardate" type="datetime" placeholder="提交起始时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
              <el-date-picker v-model="serviceinfo.enddate" type="datetime" placeholder="提交结束时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </div> -->
            <div class="leftitem">
              <el-input class="merchants" v-model.trim="serviceinfo.userName" @keyup.enter.native="soso" placeholder="用户名"></el-input>
            </div>
          </div>
          <div class="leftitem">
              <el-input class="merchants" v-model.trim="serviceinfo.phone" @keyup.enter.native="soso" placeholder="手机号"></el-input>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem">
              <el-select v-model="serviceinfo.state" placeholder="用户类型" @change="allUserTypes">
                <el-option v-for="item in allUserType" :label="item.rolename" :value="item.id" :key="item.value"></el-option>
              </el-select>
            <el-input class="merchants" v-model.trim="serviceinfo.agent" placeholder="昵称" @keyup.enter.native="soso"></el-input>
          </div>
          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="soso" :disabled="isDisable">搜索</el-button>
            <el-button icon="el-icon-refresh" type="primary" @click="reset">重置</el-button>
          </div>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          v-loading="loading"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
           <el-table-column type="index" align="center" width='50' label="序号"></el-table-column>
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="username" align="center" label="用户名"></el-table-column>
          <el-table-column prop="nickName" align="center" label="昵称"></el-table-column>
          <el-table-column prop="phone" align="center" label="手机号"></el-table-column>
          <el-table-column prop="email" align="center" label="邮箱"></el-table-column>
          <el-table-column prop="createtime" align="center" label="创建时间"></el-table-column>
          <el-table-column prop="rolesName" align="center" label="用户类型"></el-table-column>
          <el-table-column prop="typeName" align="center" label="是否系统用户"></el-table-column>
          <el-table-column prop="bindstatus" align="center" label="是否绑定手机号">
            <template slot-scope="scope" plain>
                <span v-show="scope.row.bindstatus==null||scope.row.bindstatus==0">未绑定</span>
                <span v-show="scope.row.bindstatus==1">已绑定</span>
            </template>
          </el-table-column>
          
          <el-table-column fixed="right" align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" size="small" v-if="rolesId == 1 || rolesId ==5 || rolesId ==6 || rolesId ==8" @click="changePassword(scope.row)">修改</el-button>
              <el-button type="text" size="small" style="color:red" v-if="scope.row.status !== 98" @click="disable(scope.row.id)">停用</el-button>
              <el-button type="text" style="color:green" v-show="scope.row.status == 98" @click="enable(scope.row.id)">启用</el-button >
              <el-button type="text" size="small" style="color:orange" v-if="scope.row.type == 1" @click="postdelete(scope.row.id)">注销</el-button>
              <el-button type="text" size="small" v-if="rolesId == 1 || rolesId ==5 || rolesId ==6 || rolesId ==8" @click="resetPassword(scope.row.id)">重置密码</el-button>
              
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10,20,30,40,50]"
            :page-size='cur_size'
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
          ></el-pagination>
        </div>
      </div>
      <br>
      <br>
      <!-- 修改账号 -->
      <el-dialog v-dialogDrag title="修改账号" :visible.sync="visible" width="30%" :close-on-click-modal = "false">
        <el-form
          :model="accountalter"
          status-icon
          ref="accountalter"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item :required="true" label="用户名" >
           <div>{{changUser.username}}</div>
          </el-form-item>
          <el-form-item :required="true" label="用户类型" >
           <div>{{changUser.userType}}</div>
          </el-form-item>
          <el-form-item :required="true" label="昵称" >
           <el-input type="text" v-model.trim="changUser.nickName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="手机号">
            <el-input type="text" v-model.trim="changUser.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="邮箱">
            <el-input type="text" v-model.trim="changUser.email" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item :required="true" label="密码">
            <el-input type="text" v-model="accountalter.contact" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="服务密码">
            <el-input type="text" v-model="accountalter.contact" autocomplete="off"></el-input>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <!-- @click="visible = false" -->
          <el-button type="primary" @click="updateUser(changUser.id)">确定</el-button>
        </span>
      </el-dialog>
      <!-- 新增账号 -->
      <el-dialog v-dialogDrag title="新增账号" :visible.sync="addaccount" width="30%" :close-on-click-modal='false'>
        <el-form
          :model="accountalter"
          status-icon
          ref="accountalter"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item :required="true" label="用户类型" >
            <el-select class="select-input" v-model="addUserdata.id" placeholder="用户类型" @change="changusertype">
              <el-option v-for="(item,index) in getAllUserType" :label="item.rolename" :value="item.id" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :required="true" label="商户名" v-if="(addUserdata.id == 5 || addUserdata.id == 6) && rolesId !== 5 && rolesId !== 6">
           <el-autocomplete
              class="inline-input"
              v-model="state1"
              :fetch-suggestions="querySearch"
              placeholder="请输入商户名"
              @select="handleSelect"
              :debounce="1000"
              @change="fuzzyQuery"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item :required="true" label="商户下属门店" v-if="addUserdata.id == 6 &&  rolesId !== 6">
            <el-select class="select-input" v-model="storeList.id" placeholder="商户下属门店"  @change="changusertype1">
              <el-option v-for="item in storeList" :label="item.shopName" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :required="true" label="用户名" >
           <el-input type="text" v-model.trim="addUserdata.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="昵称" >
           <el-input type="text" v-model.trim="addUserdata.nickName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="手机号">
            <el-input type="text" v-model.trim="addUserdata.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="邮箱">
            <el-input type="text" v-model.trim="addUserdata.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="密码">
            <el-input type="text" v-model.trim="addUserdata.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="服务密码">
            <el-input type="text" v-model.trim="addUserdata.servicePassword" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addaccount = false">取消</el-button>
          <el-button type="primary" @click="addUser()">确定</el-button>
        </span>
      </el-dialog>
      <!-- 新增账号成功弹框 -->
      <el-dialog v-dialogDrag title="新增账号成功" :visible.sync="addaccount1" width="30%" center :close-on-click-modal='false'>
          <div class="center center1">
            <i class="el-icon-success"></i>
            <span>账号创建成功！</span>
          </div>
          <div class="center">
            您的账号/用户名：123456
          </div>
          <div class="center">
            密码：123456
          </div>
          <div class="center">
            服务密码：123456
          </div>
          <div class="juzhong">*服务密码用于交易退款，请妥善保管！</div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addaccount1 = false">好 的</el-button>
        </span>
      </el-dialog>


    </div>
  </div>
</template>

<script>
import { agent,getAccountList,getUserTypes,getAddUserTypes,addAccount,disableUser,resetPassword,updateUser,getUserSelect,getStoreList,postUserList,enableUser,postuserdelete} from "@/api/api";
export default {
  name: "baseform",
  data: function() {
    return {
      loading: true,
      isDisable: false,
      //权限ID
      rolesId:null,
      fid:null,
      mid:null,
      total1:0,
      cur_page: 1,
      cur_size: 10,
      multipleSelection: [],
      merchantarr:[],
      pageCount:"",
      visible: false,
      addaccount: false,
      addaccount1:false,
      serviceinfo:{
        // stardate:"",
        // enddate:"",
        userName:"",
        phone:"",
        agent:"",
        state:""
      },
      accountalter:{},
      allUserType:[],
      //新增用户 获取用户类型列表
      getAllUserType:[],
      //新增用户 数据
      addUserdata:{
        id:'',
        userName:"",
        nickName:"",
        phone:"",
        email:"",
        password:"",
        servicePassword:""
      },
      changUser:{
        username:"",
        userType:"",
        nickName:"",
        phone:"",
        email:"",
        id:null
      },
      //新增框 模糊查询
      restaurants: [{value:'',id:''}],
      state1: '',
      state2: '',
      inputName:'',
      //门店列表
      storeList:[],
      oemFlag:''
    };
  },
  created() {
    // this.agent();
    this.oemFlag = sessionStorage.getItem('oemFlag')
    this.getPermissions()
    this.getUserTypes()
    if(this.rolesId !== 5){
      this.getData(this.rolesId);
    }else if(this.rolesId == 5){
      this.getData();
      this.serviceinfo.state = ''
    }
    
    // console.log(this.rolesId)
  },
  mounted() {
  
  },
  methods: {
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    //分页导航
    handleSizeChange(val){
      // console.log(val)
      // console.log(this.rolesId)
        this.cur_size = val;
        if(this.rolesId !== 5){
        this.getData(this.serviceinfo.state);
        }else if(this.rolesId == 5){
          this.getData(this.serviceinfo.state)
        }
    },
    handleCurrentChange(val){
      console.log(this.serviceinfo.state)
        this.cur_page = val;
        if(this.rolesId !== 5){
        this.getData(this.serviceinfo.state);
        }else if(this.rolesId == 5){
          this.getData(this.serviceinfo.state)
        }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //获取权限
    getPermissions(){
      var aaa = sessionStorage.getItem('userInfo')
      var bbb = JSON.parse(aaa)
      this.rolesId = bbb.rolesId
      this.serviceinfo.state = this.rolesId
      console.log(this.rolesId)
      this.fid = bbb.fid
      this.mid = bbb.mid
      // console.log(this.fid)
    },
    //获取账号列表
    getData(val){
      this.isDisable = true
      getAccountList({
        page: this.cur_page,
        size: this.cur_size,
        keywords: this.serviceinfo.userName,
        phone: this.serviceinfo.phone,
        // rolesId: this.serviceinfo.state,
        rolesId: val,
        nickName: this.serviceinfo.agent
      }).then(res => {
        if(res.code == 405){
          localStorage.removeItem('token')
          this.$router.push('/login');
        }else if(res.code == 200){
          this.isDisable = false
          this.loading = false
          this.merchantarr = res.data
          this.total1 = res.pageInfo.recordCount
          this.pageCount = res.pageInfo.pageCount
        }else if(res.code == 500){
          this.isDisable = false
          this.loading = false
          this.$message.error(res.message);
        }
      })
      getAddUserTypes({
      }).then(res => {
        console.log(res.data)
        this.getAllUserType = []
        for(var i=0;i<res.data.length;i++){
          this.getAllUserType.push({value:res.data[i].rolename,id:res.data[i].id})
        }
        // this.getAllUserType = res.data
        // console.log(this.getAllUserType)
      })
      if(this.fid !== null){
        getStoreList({
        merchantId:this.fid
        }).then(res => {
          if(res.code ==200){
            // this.storeList = []
            // for(var i=0;i<res.data.length;i++){
            //   this.storeList.push({value:res.data.rows[i].shopName,id:res.data.rows[i].id})
            // }
            this.storeList = res.data.rows
            // console.log(this.storeList)
          }else{
            // console.log(this.roleId)
          }
        })
      }
      
      

    },
    // 搜索
    soso(){
      this.loading = true
      this.cur_page = 1
      if(this.serviceinfo.state!== null){
        this.getData(this.serviceinfo.state)
      }else{
        this.getData()
      }
      
    },
    // 重置
    reset(){
      this.serviceinfo.phone = ''
      this.serviceinfo.userName = ''
      // this.serviceinfo.state= ''
      this.serviceinfo.agent= ''
      if(this.rolesId == 5){
        this.serviceinfo.state = ''
      }
    },
    // 刷新
    refresh (){
      // location.reload()
      // this.$router.replace({
      //   path: '/refresh',
      //   query: {
      //     t: Date.now()
      //   }
      // })
      this.loading = true
      this.channellist()
    },
    //获取用户类型下拉列表
    getUserTypes(){
      getUserTypes({
      }).then(res =>{
        if(res.code == 405){
          localStorage.removeItem('token')
          this.$router.push('/login');
        }else{
          this.allUserType = res.data
        }
      })
    },
    //用户类型下拉列表
    allUserTypes(){
      // this.cur_page = 1
      // this.getData()
    },
    //新增账号 获取用户类型列表数据
    addAccount(){
      this.addaccount = true
      this.addUserdata.id = ''
      this.addUserdata.userName = ''
      this.addUserdata.nickName = ''
      this.addUserdata.phone= ''
      this.addUserdata.email = ''
      this.addUserdata.password = ''
      this.addUserdata.servicePassword = ''
      this.state1 = ''
      this.storeList.id = ''
      
      // else if(this.storeList.length !== 0){
      //   this.addUserdata.id = this.storeList[0].id
      // }
      // console.log(this.addUserdata.id)
      getAddUserTypes({
      }).then(res => {
        this.getAllUserType = res.data
        // console.log(this.getAllUserType)
      })
      if(this.getAllUserType.length !== 0){
        this.addUserdata.id = this.getAllUserType[0].id
      }
      if(this.rolesId == 5 && this.fid !== null){
        getStoreList({
        merchantId:this.fid
        }).then(res => {
          if(res.code ==200){
            this.storeList = []
            // for(var i=0;i<res.data.length;i++){
            //   this.storeList.push({value:res.data.rows[i].shopName,id:res.data.rows[i].id})
            // }
            this.storeList = res.data.rows
          }
        })
      }
    },
    //新增账号
    addUser(){
      if(this.rolesId == 1 && this.addUserdata.id == 5){//如果rolesId == 1超管登陆 且 addUserdata.id == 5选择添加商户
        // this.rolesId = this.addUserdata.id //新增时rolesId为用户类型选中时的id   
        // this.state1 = this.state2 //新增时mid为商户名匹配的id    state2是用来存储模糊查询选中时的id
        this.storeList.id = this.state2//因为新增的是商户账户 fid 等于选择的mid    
      }
      else if(this.rolesId == 1 && this.addUserdata.id == 6){//如果rolesId == 1超管登陆 且 addUserdata.id == 6选择添加门店  
        // this.rolesId = this.addUserdata.id
        // this.state1 = this.state2
      }
      else if(this.rolesId == 5 && this.addUserdata.id == 5){//如果rolesId == 5商户账号登陆 且 addUserdata.id == 5选择添加自己的商户号
        this.storeList.id = this.fid //如果商户号登陆 添加自身的商户账户 fid 和 mid 等于 本身的
        this.state2 = this.mid
      }
      else if(this.rolesId == 5 && this.addUserdata.id == 6){
        this.state2 = this.mid
      }
      else if(this.rolesId == 6){
        this.state2 = this.mid
        this.storeList.id = this.fid
      }else if(this.rolesId == 2){
         this.storeList.id = this.fid
      }
      postUserList({
        rolesId:this.addUserdata.id,
        // type:this.addUserdata.id,
        username:this.addUserdata.userName,
        nickName:this.addUserdata.nickName,
        phone:this.addUserdata.phone,
        email:this.addUserdata.email,
        password:this.addUserdata.password,
        servicePassword:this.addUserdata.servicePassword,
        mid:this.state2,
        fid:this.storeList.id
      }).then(res => {
        // console.log(res)
        if(res.code == 200){
          this.addUserdata.id = ''
          this.addUserdata.userName = ''
          this.addUserdata.nickName = ''
          this.addUserdata.phone= ''
          this.addUserdata.email = ''
          this.addUserdata.password = ''
          this.addUserdata.servicePassword = ''
          this.state1 = ''
          this.storeList.id = ''
          this.getData(this.serviceinfo.state)
          this.addaccount = false
          this.restaurants = []
        }else if(res.code == 500){
          // this.storeList.id = ''
          // this.state1 = ''
          this.$message.error(res.message);
          console.log(this.storeList.id)
          console.log(this.state1)
        }
      })
    },
    //商户名 模糊查询
    fuzzyQuery(e){

    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
      getUserSelect({ //商户模糊查询
        roleId: 5,
        keywords: this.state1
      }).then(res => {
        // console.log(res.data)
        if(res.code == 200){
          this.restaurants = []
          for(var i=0;i<res.data.length;i++){
            this.restaurants.push({'value':res.data[i].fname,'id':res.data[i].fid})
          }
          let results = queryString
              ? this.restaurants.filter(this.createFilter(queryString))
              : this.restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        }
      })
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
      };
    },
    handleSelect(item) {
      this.state2 = item.id
      console.log(item.id)
      getStoreList({
        merchantId:item.id
      }).then(res => {
        if(res.code ==200){
          this.storeList = []
          // console.log(res.data.rows)
          // for(var i=0;i<res.data.length;i++){
          //   this.storeList.push({'value':res.data.rows[i].shopName,'id':res.data.rows[i].id})
          // }
          this.storeList = res.data.rows
          // console.log(this.storeList)
        }
      })
      // this.state1 = item.id
    },
    changusertype(){
      // console.log(this.addUserdata.id)
      // getUserSelect({
      //   roleId: 5,
      //   keywords: this.state1
      // }).then(res => {
      //   console.log(res.data)
      //   if(res.code == 200){
      //     for(var i=0;i<res.data.length;i++){
      //       this.restaurants.push({'value':res.data[i].fname,'id':res.data[i].fid})
      //     }
      //   }
      // })
      
    },
    changusertype1(){
      // console.log(this.storeList.id)
    },
    //修改账户
    changePassword(val){
      this.visible = true;
      this.changUser.username = val.username
      this.changUser.userType = val.rolesName
      this.changUser.nickName = val.nickName
      this.changUser.phone = val.phone
      this.changUser.email = val.email
      this.changUser.id = val.id
    },
    //修改更新
    updateUser(val){
      updateUser({
        id:val,
        fid: this.fid,
        mid: this.mid,
        username: this.changUser.username,
        nickName: this.changUser.nickName,
        phone: this.changUser.phone,
        email: this.changUser.email
      }).then(res => {
        if(res.code == 200){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.visible = false;
          if(this.rolesId !== 5){
          this.getData(this.serviceinfo.state);
          }else if(this.rolesId == 5){
            this.getData()
          }
        }else if(res.code == 500){
          this.$message.error(res.message);
        }
      })
    },
    //停用
    disable(val){
      this.$confirm(`是否确定停用该账号？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      }).then(() => {
          disableUser({},val)
          .then(res => {
            console.log(res)
            if(res.code == 200){
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.getData(this.serviceinfo.state)
            }else if(res.code == 500){
              this.$message.error(res.message);
              this.getData(this.serviceinfo.state)
            }
          })
      })
      .catch(() => {
          this.$message({
              type: "info",
              message: "已取消"
          });
      });
      
    },
    //启用
    enable(val){
      this.$confirm(`是否确定启用该账号？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      }).then(() => {
          enableUser({},val)
          .then(res => {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            if(this.rolesId !== 5){
            this.getData(this.serviceinfo.state);
            }else if(this.rolesId == 5){
              this.getData()
            }
          })
      })
      .catch(() => {
          this.$message({
              type: "info",
              message: "已取消"
          });
      });
    },
    //删除
    postdelete(val){
      this.$confirm(`是否确定注销该账号？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      }).then(() => {
          postuserdelete({},val)
          .then(res => {
            this.$message({
              message: '注销成功',
              type: 'success'
            });
            if(this.rolesId !== 5){
            this.getData(this.serviceinfo.state);
            }else if(this.rolesId == 5){
              this.getData()
            }
          })
      })
      .catch(() => {
          this.$message({
              type: "info",
              message: "已取消"
          });
      });
    },
    //重置密码
    resetPassword(val){
      console.log(val)
       this.$confirm('如果选择重置，您的登陆密码将被重置为“123456”!', '重置密码', {
          confirmButtonText: '重置',
          cancelButtonText: '取消',
          type: 'warning',
           center: true
        }).then(() => {
          resetPassword({},val)
          .then(res => {
            this.$message({
              type: 'success',
              message: '重置成功!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    }
  }
};
</script>
<style scoped lang="less">
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #374459;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
}
.statistical > .statisticalitem {
  width: 50%;
  text-align: center;
  line-height: 200%;
}
.tableBox {
  margin-top: 20px;
}

.red {
  color: #f9607d;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
.juzhong{
  text-align: center;
  color: red;
}
.center{
  text-align: center;
  margin-bottom: 10px;
}
.center1>i{
  color: #66b1ff;
  height: 50px;
  font-size: 50px;
  line-height: 50px;
  // position: absolute;
  margin: 0 -100px;
  margin-right: 55px;
  text-align: center;
}
.center1{
  height: 50px;
  position: relative;
}
.center1>span{
  height: 50px;
  position: absolute;
  font-size: 18px;
  margin: 0 -35px;
  line-height: 50px;
}
.inline-input{
  width: 100%;
}
.select-input{
  width: 100%;
}
</style>